<template>
	<!-- #ifndef APP-NVUE -->
	<view class="read-rich-text" :style="richTextStyle" v-html="richtext">
	</view>
	<!-- #endif -->
	<!-- #ifdef APP-NVUE -->
	<view class="read-rich-text" :style="richTextStyle">
		<web-view
		ref="webview"
		@onPostMessage="onPostMessage"
		:style="webviewStyle"
		:src="'/uni_modules/yingbing-ReadPage/hybrid/html/richtext.html?rich=' + encodeURIComponent(JSON.stringify(richtext)) + '&pageType=' + pageType"></web-view>
	</view>
	<!-- #endif -->
</template>

<script>
	export default {
		props: {
			richtext: {
				type: String,
				default: ''
			},
			pageType: {
				type: String,
				default: ''
			},
			fontFace: {
				type: Array,
				default () {
					return new Array
				}
			}
		},
		computed: {
			webviewStyle () {
				return this.pageType == 'scroll' ? {
					height: this.customWebviewHeight + 'px'
				} : {
					flex: 1
				}
			},
			richTextStyle () {
				return this.pageType == 'scroll' ? {
					'padding-bottom': '20rpx'
				} : {
					flex: 1
				}
			}
		},
		data () {
			return {
				customWebviewHeight: 0
			}
		},
		mounted() {
			// #ifdef APP-NVUE
			if ( this.fontFace.length > 0 ) {
				this.$nextTick(function () {
					setTimeout(() => {
						this.setFontFace()
					}, 100)
				})
			}
			// #endif
		},
		methods: {
			onPostMessage (e) {
				e.detail.data.forEach(item => {
					if ( item.customClick ) {
						this.$emit('customClick', item.customClick)
					}
					if ( item.height ) {
						this.customWebviewHeight = item.height
					}
				})
			},
			setFontFace () {
				this.$refs.webview && this.$refs.webview.evalJS("setFontFace(" + encodeURIComponent(JSON.stringify(this.fontFace)) + ")")
			}
		},
		watch: {
			FontFace (newVal) {
				if ( newVal.length > 0 ) {
					this.$nextTick(function () {
						setTimeout(() => {
							this.setFontFace()
						}, 100)
					})
				}
			}
		}
	}
</script>

<style scoped>
	.read-rich-text {
		/* #ifndef APP-NVUE */
		box-sizing: border-box;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		/* #endif */
	}
</style>